<template>
	<view class="bigbox">
		<view class="box">
			<qiun-title-bar class="title" title="2023年 2月、6月充电桩的充电时长和耗电量" />
			<view class="charts-box">
				<qiun-data-charts type="column" :chartData="Column" />
			</view>
		</view>
		<view class="box">
			<qiun-title-bar class="title" title="2023年下半年收益" />
			<view class="charts-box">
				<qiun-data-charts type="ring" :chartData="PieA" :opts="PieAOpts" />
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				Column: {
					"categories": ["2月", "6月"],
					"series": [{
						"name": "每小时耗电量",
						"data": [24, 40]
					}, ]
				},
				PieAOpts: {
					"title": {
						"name": "收益/收入",
						"fontSize": 15,
						"color": "#666666"
					},
					"subtitle": {
						"name": "72/300",
						"fontSize": 25,
						"color": "#7cb5ec"
					}
				},
				PieA: {
					"series": [{
						"data": [{
							"name": "耗电成本",
							"value": 200
						}, {
							"name": "服务费",
							"value": 28
						}]
					}]
				}
			}
		},
		methods: {

		}
	}
</script>

<style>
	page{
		background: linear-gradient(#e4f2fc 40%, white 60%);
	}
	.bigbox {
		padding: 20rpx;
	}
	.box{
		height:600rpx ;
		
		margin-bottom: 90rpx;
	}
	.title {
		margin-top: 30rpx;
	}
	.charts-box{
		background-color: #fff;
		border-radius: 25rpx;
		box-shadow: 0 1rpx 12rpx rgba(0,0,0,0.1);
	}
</style>
